<style>
	.PAGE_newserverx_PanelBody p {
		margin-left: 12px;
	}

	.PAGE_NewserverxCreatePanelWapper {
		max-width: 700px;
		margin: auto;
		margin-top: 14%;
	}

	.PAGE_NewserverxLogK {
		padding: 8px;
		font-weight: 400;
		font-size: 13px;
		color: #504a4a;
		text-align: center;
	}

	.PAGE_NewserverxLogV {
		margin: 20px 8px 2px 8px;
		color: #131212;
		font-size: 20px;
		text-align: center;
		line-height: 40px;
		overflow: hidden;
		font-weight: 800;

	}

	.PAGE_NewserverNextWapper {
		padding: 12px 0px;
		margin-top: 24px;
		border-top: 1px solid rgb(182, 177, 177);
		text-align: right;
		overflow: hidden;
	}
</style>
<div id='CreateServerViewx' class="OneContainer">
	<div class="PAGE_NewserverxCreatePanelWapper" v-show="pagecode==0">
		<div class="Panel PanelBlack">
			<div class="PanelTitle">实例创建方案</div>
			<div class="PanelBody">
				<div class="row">
					<div class="col-md-4">
						<div class="PanelItemBlock" v-on:click="createTypeSelect(0)">
							<div class="PAGE_NewserverxLogV">
								<p>引导创建(推荐)</p>
							</div>
							<div class="PAGE_NewserverxLogK">
								适应于基于 Java 开发的主流服务端（Spigot，Bukkit，Bungeecord 等）
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="PanelItemBlock" v-on:click="toNewServer">
							<div class="PAGE_NewserverxLogV">
								<p>快速创建</p>
							</div>
							<div class="PAGE_NewserverxLogK">
								适应于基于 Java 开发的主流服务端，并且非常熟悉面板操作的用户
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="PanelItemBlock" v-on:click="createTypeSelect(2)">
							<div class="PAGE_NewserverxLogV">
								<p>自定义启动命令</p>
							</div>
							<div class="PAGE_NewserverxLogK">
								支持所有类型的服务端，支持所有程序，甚至可以启动脚本来实现各种需求
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="PAGE_NewserverxCreatePanelWapper" v-show="pagecode==1" style="max-width: 500px;">
		<div class="Panel PanelBlack">
			<div class="PanelTitle">项目确定</div>
			<div class="PanelBody">
				<div class="row">
					<div class="col-md-12">
						<p><b>实例项目命名与位置（只支持字母，下划线和数字）</b></p>
						<p>如: MyServer001,MyBungeecord</p>
						<div class="input-group input-group-sm">
							<span class="input-group-addon">实例名称</span>
							<input type="text" class="form-control" v-model="name">
						</div>
						<p>项目存放目录，一般情况自动即可</p>
						<div class="input-group input-group-sm">
							<span class="input-group-addon">项目位置</span>
							<input type="text" class="form-control" placeholder="[自动]" v-model="cwd">
						</div>
						<div class="PAGE_NewserverNextWapper">
							<button class="btn btn-warning" v-on:click="previousStep">上一步</button>
							<button class="btn btn-success" v-on:click="nextStep">下一步</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="PAGE_NewserverxCreatePanelWapper" v-show="pagecode==2">
		<div class="Panel PanelBlack">
			<div class="PanelTitle">上传服务端程序</div>
			<div class="PanelBody">
				<div class="row">
					<div class="col-md-12">
						<p v-show="selectCreateType==0">请上传你的核心程序或者 Minecraft 服务端程序。</p>
						<p v-show="selectCreateType==0">通常都是以 jar 结尾的文件，支持大部分主流服务端（Spigot，Bukkit，Bungeecord 等）</p>
						<p v-show="selectCreateType==2">上传你的程序，记住你的文件名，稍后可能会用到</p>
						<p v-show="selectCreateType==2">支持任何可执行程序，支持所有服务端程序，（如 jar,exe,bat,sh）</p>
						<p>
							<button class="btn btn-primary" v-on:click="uploadFile()">选择上传文件</button>
							<span>&nbsp;&nbsp;上传进度: <span id="uploadPercentComplete">0%</span></span>
						</p>
						<p class="red">实例项目存放目录: {{serverCwd}}</p>
						<p class="red">启动程序端: <span class="color-high-red ">{{jarName}}</span></p>
						<div class="PAGE_NewserverNextWapper">
							<button class="btn btn-warning" v-on:click="previousStep">上一步</button>
							<button class="btn btn-success" v-on:click="nextStep">下一步</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="PAGE_NewserverxCreatePanelWapper" style="margin-top: 5%;" v-show="pagecode==3&&selectCreateType==0">
		<div class="Panel PanelGreen">
			<div class="PanelTitle">即将创建</div>
			<div class="PanelBody">
				<div class="row">
					<div class="col-md-12">
						<h4>确保 Java 安装正常，再填写相关启动参数，即可创建完成</h4>
						<br />
						<p>[选填] 根据您的需求或计算机内存大小填写，默认自动，需要在数字后加单位（如 1024M，2G）</p>
						<div class="row">

							<div class="col-sm-6">
								<div class="input-group input-group-sm">
									<span class="input-group-addon"> 最大内存堆 </span>
									<input type="text" class="form-control" v-model="Xmx"
										placeholder="[自动] 若填写请加单位(如1024M,2G)">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="input-group input-group-sm">
									<span class="input-group-addon"> 初始内存堆 </span>
									<input type="text" class="form-control" v-model="Xms"
										placeholder="[自动] 若填写请加单位(如1024M,2G)">
								</div>
							</div>
						</div>
						<p>[选填] 一般而言当您需要附加参数如 (-server 等等) 时，可以填写</p>
						<div class="input-group input-group-sm">
							<span class="input-group-addon">启动附加参数</span>
							<input type="text" class="form-control" v-model="addCmd"
								placeholder="[无附加参数，可不填] (列如: -server)">
						</div>
					</div>
					<div class="col-md-12">
						<h4>信息确认</h4>
						<p><b>实例项目名:</b> {{name}}</p>
						<p><b>服务端文件:</b> {{jarName}}</p>
						<p><b>存放目录:</b> {{serverCwd}}</p>
						<p><b>最大内存:</b>{{Xmx || '自动'}}<b> | 最小内存:</b>{{Xms || '自动'}} <b> | 附加参数:</b>{{addCmd || '无'}}
						</p>
						<div class="PAGE_NewserverNextWapper">
							<button class="btn btn-warning" v-on:click="previousStep">上一步</button>
							<button class="btn btn-success" v-on:click="toCreateServer">确认无误，立刻创建</button>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>


	<div class="PAGE_NewserverxCreatePanelWapper" style="margin-top: 10%;" v-show="pagecode==3&&selectCreateType==2">
		<div class="Panel PanelBlack">
			<div class="PanelTitle">填写自定义启动命令</div>
			<div class="PanelBody">
				<div class="row">
					<div class="col-md-12">
						<p>通常是一行启动命令，若你想启动多行命令，可将命令写在脚本文件中，然后在这里启动脚本</p>

						<br />
						<div class="input-group input-group-sm">
							<span class="input-group-addon">启动命令</span>
							<input type="text" class="form-control" placeholder="程序启动命令.... (列如: java -jar xxx.jar)"
								v-model="highCommande">
						</div>
						<small>运行目录: {{serverCwd}} </small>
						<br />
						<small>程序名: {{jarName}} </small>
						<br /><br />
						<p>自定义命令可以帮助您执行任何命令，请务必仔细阅读以下文字！</p>
						<ul class="ulInfo">
							<li>若是 java 程序可能需要添加 -Djline.terminal=jline.UnsupportedTerminal 参数在 -jar 之前。
							</li>
							<li>示范: java -Djline.terminal=jline.UnsupportedTerminal -jar run.jar --nogui</li>
							<li>示范: "bash"，"cmd.exe"，"./start_server.sh" 或 "python xxx.py"</li>
						</ul>
						<div class="PAGE_NewserverNextWapper">
							<button class="btn btn-warning" v-on:click="previousStep">上一步</button>
							<button class="btn btn-success" v-on:click="toCreateServer">确认无误，立刻创建</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 文件上传时的表单 -->
	<form id="PAGE_UploadForm" style="display:none;" method="post" enctype="multipart/form-data" action="/fileupload">
		<input type="file" name="upload_file" id="PAGE_UploadFormButton" v-on:change="uploadFormChange" />
		<input type="text" name="cwd" v-model="cwd">
	</form>
</div>

<script>
	MI.rListener('onload', function () {
		// 定义页面地址
		TOOLS.definePage('template/component/newserverx', 'genuser/home', '');


		VIEW_MODEL.newVue('CreateServerViewx', {
			el: '#CreateServerViewx',
			data: {
				pagecode: 0,
				selectCreateType: 0,
				name: 'new_server_' + ((Date.parse(new Date()) + "").substr(6)),
				jarName: '',
				cwd: '',
				Xmx: '',
				Xms: '',
				addCmd: '',
				java: '',
				highCommande: '',
				uploadPercentComplete: 0
			},
			methods: {
				toCreateServer: function () {
					var addCmdList = this.addCmd.split(' ');
					if (!TOOLS.isStdText(this.name)) {
						TOOLS.pushMsgWindow("服务器名字不合法！仅限字母数字下划线！");
						return;
					}
					var obj = {
						addCmd: addCmdList,
						serverName: this.name,
						jarName: this.jarName,
						cwd: this.cwd,
						Xmx: this.Xmx,
						Xms: this.Xms,
						java: this.Java || 'java',
						highCommande: this.highCommande
					};
					WS.sendMsg('server/create', JSON.stringify(obj));
					RES.redirectPage('./template/server.html', 'server/view');
				},
				toCreaterDir: function () {
					var obj = {
						serverName: this.name,
						cwd: this.cwd
					};
					WS.sendMsg('server/create_dir', JSON.stringify(obj));
				},
				nextStep: function () {
					this.pagecode += 1;
				},
				previousStep: function () {
					this.pagecode -= 1;
				},
				createTypeSelect: function (id) {
					this.selectCreateType = id;
					this.nextStep();
				},
				toNewServer: function () {
					RES.redirectPage('./template/component/newserver.html', null, '');
				},
				uploadFile: function () {
					// 若未填写cwd则自动默认
					if (this.cwd == '') this.cwd = './server/server_core/' + this.name;
					if (this.uploadPercentComplete == 0) {
						$("#PAGE_UploadFormButton").click();
					}
				},
				uploadFormChange: function (e) {
					if (this.uploadPercentComplete == 0) {
						var file = $("#PAGE_UploadFormButton")[0].files[0];
						var filename = file.name;
						this.jarName = filename;
						var that = this;
						TOOLS.fileupload(file, '/fileupload', {
							cwd: this.cwd
						}, function (percentComplete) {
							console.log('上传进度:', percentComplete);
							that.uploadPercentComplete = percentComplete;
							$('#uploadPercentComplete').text(percentComplete + '%');
						}, function () {
							that.uploadPercentComplete = 100;
							TOOLS.pushMsgWindow('上传成功');
							$('#uploadPercentComplete').text('上传成功');
						}, function () {
							that.uploadPercentComplete = -1;
							TOOLS.pushMsgWindow('上传失败，请稍后再进行尝试');
							$('#uploadPercentComplete').text('上传错误，请刷新网页再重试');
						});
					}


				}
			},
			computed: {
				serverCwd: function () {
					if (this.cwd == '') return '<面板所在目录>/server/server_core/' + this.name + '/';
					return this.cwd;
				}
			}
		});

	});

	MI.rListener('onend', function () { });
</script>